!!!
%html{:lang => 'en'}
  %head
    %title
      KCoin
    %meta{:charset => 'utf-8'}
    %meta{:name => 'viewport', :content=>'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no'}

    = include_stylesheet 'metro-4.2.48/metro-all.min'
    = content :stylesheets
    = include_stylesheet 'kcoin'

    = include_javascript 'https://code.jquery.com/jquery-3.3.1.min.js'
    = include_javascript 'metro-4.2.48/metro.min'

  %body
    .container-fluid.kcoin-background
      -#.text-center.login-title= link_to('<span class="kcoin-title">K</span>coin', '/')
      .text-center.login-title
        %img{:src=>"icons/kcoin-log-big.png"}
      .form.join-form
        .text-center.login-sub-title
          = t('join_new_account')
        .grid
          .row
            .cell.login-context
              %form{:action=>"/auth/join", :method=>'post',"data-role"=>'validator', "data-interactive-check" => "true"}
                .form-group
                  %label
                    = t('join_email')
                  %span.kcoin-sub-text
                    = t('join_email_tip')
                  %input{:type => 'email',
                         :name => 'email',
                         :value => '',
                         maxlength: 120,
                         autofocus: "autofocus",
                         :placeholder => "you@example.com",
                         "data-validate" => "required email custom=validateExistEmail"}
                  %span.invalid_feedback
                    = t('join_email_invalid')
                .form-group
                  %label
                    = t('join_password')
                  %input.border-radius-5.border{:type => 'password',
                         :name => 'password',
                         :value => '',
                         maxlength: 10,
                         :placeholder => "#{ t("join_password_placeholder") }",
                         "data-role" => "input",
                         "data-clear-button" => "false",
                         "data-validate" => "required pattern=^\\w{6,10}$"}
                  %span.invalid_feedback
                    = t('join_password_invalid')
                .form-group
                  %label
                    = t('join_login')
                  %input{:type => "text",
                         :name => 'login',
                         :value => '',
                         max_length: 120,
                         :placeholder => "#{ t('join_login_placeholder') }"}
                .form-group
                  %label
                    = t('join_nickname')
                  %input{:type => "text",
                         :name => 'name',
                         :value => '',
                         max_length: 120,
                         :placeholder => "#{ t('join_nickname_placeholder') }"}
                .form-group
                  %input.button.info.kcoin-button-flex{:type=>'submit',:value => "#{ t('join_submit') }" }
                  .link= link_to("#{ t('join_signin') }", '/auth/login')
          .row
            .cell.login-context
              %a.button.dark.kcoin-button-flex.mt-10{:href => '/auth/github/login'}
                %img.github-icon{:src=>"icons/github-icon.png"}
                  = t('join_signin_github')

    = include_javascript 'join'